<template>
    <div class="page-content">
        <div class="comm-content" ref="box"></div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            myEcharts: null,

        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getdata()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
    },
    methods: {
        screen(){
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width =  this.$refs.box.offsetWidth
            let num = width / 100*2.5
            let options={
                title:{
                    textStyle:{ //设置主标题样式
                        fontSize:num
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        initEcharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            let options = {
                title: {
                    text: '种植农作物统计面积',
                },
                legend:{
                    show:true,
                    icon:'',
                    top:'5%'
                }
            }
            this.myEcharts.setOption(options)
        },
        async getData() {
            let dataList = await this.$http('/api/TotalAreaCropsProportion')
            console.log(dataList)

            let dataName = []
            dataList.data.forEach(item => {
                dataName.push({
                    name: item.name,
                    value: item.value
                })
            })
            console.log(dataName)
            this.setEcharts(dataName)
        },

        setEcharts(dataName) {
            let options = {
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        data: dataName
                    }
                ]
            }
            this.myEcharts.setOption(options)
        }
    },


}
</script>
<style scoped></style>